<template>
  <div class="subcategories">
    <van-nav-bar :title="parentCategory.name" left-text="" left-arrow @click-left="$router.go(-1)" :fixed="true"
      :placeholder="true" />
    <van-tabs v-model:active="active" @click-tab="classtwoid">
      <van-tab v-for="(item, index) in brotherCategory" :key="index" :title="item.name">
        <p class="i1">{{ item.name }}</p>
        <p class="i2">{{ item.desc }}</p>
      </van-tab>
    </van-tabs>
    <div class="classValues">
      <div v-for="(item, index) in infolist" :key="index" @click="classvalue(item.id)">
        <img :src="item.picUrl" alt="" />
        <p class="classValuesp1">{{ item.name }}</p>
        <p class="classValuesp2">¥ {{ item.counterPrice }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { service } from "../api/config";
export default {
  name: "Subcategories",
  data() {
    return {
      id: "",
      classid: 0,
      active: Number(this.$route.query.index),
      brotherCategory: [],
      parentCategory: {},
      titles: {},
      infolist: [],
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    service.get("/wx/goods/category", { params: { id: this.id } }).then(res => {
      this.brotherCategory = res.data.data.brotherCategory;
      this.parentCategory = res.data.data.parentCategory;
      this.classid = this.brotherCategory[this.$route.query.index == undefined ? 0 : this.$route.query.index].id;
      service.get("/wx/goods/list", { params: { categoryId: this.classid } }).then(res => {
        this.infolist = res.data.data.list;
      });
    })

  },
  methods: {
    classtwoid(b) {
      this.titles = this.brotherCategory.find((item) => item.name == b.title);
      service.get("/wx/goods/list", { params: { categoryId: this.titles.id } }).then(res => {
        this.infolist = res.data.data.list;
      });
    },
    classvalue(id) {
      this.$store.commit('setValueDetail', id)
      this.$router.push("/shopping");
    },
  },
};
</script>

<style scoped>
.subcategories {
  background-color: #F6F8F7;
}

.i1 {
  text-align: center;
  font-size: 14px;
  margin-top: 25px;
}

.i2 {
  text-align: center;
  font-size: 12px;
  margin-top: 5px;
  color: #bdbdbc;
  padding-bottom: 20px;
}

.classValues {

  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.classValues div {
  background-color: #fff;
  width: 49%;
  margin-left: 2px;
  margin-top: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
}

.classValues div img {
  width: 100%;
}

.classValuesp1 {
  font-size: 13rem;
  text-align: center;
}

.classValuesp2 {
  font-size: 10rem;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #B4A082;
}
</style>